<!DOCTYPE html>
<html lang="zh-CN">
	<!-- 教师系统页面 -->

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<!-- 先引入jQuery -->
		<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
		<!-- <script src="https://cdn.jsdelivr.net/npm/js-cookie@3.0.1/dist/js-cookie.min.js"></script> -->
		<link rel="stylesheet" href="css/classroomsystem.css">
		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
		<title>卓越在线教师端</title>
		<style>

		</style>
	</head>

	<body>
		<div class="container">
			<!-- 左侧边栏 -->
			<aside class="sidebar">
				<div class="brand">
					<img src="img/ZXlogo.png" alt="Logo">
					<span class="brand-text">卓越在线</span>
				</div>
				<div class="user-info">
					<img src="img/toux.png" alt="User Avatar" class="user-avatar">
					<span class="user-name">Jone Cooper</span>
				</div>
				<ul class="nav-menu">
					<li>
						<a href="#" class="nav-item" data-tab="chat">聊天</a>
					</li>
					<li>
						<a href="#" class="nav-item" data-tab="courses">我的课程</a>
					</li>
					<li class="logout-item">
						<a href="#" class="nav-item">退出</a>
					</li>
				</ul>
			</aside>

			<!-- 主内容区域 -->
			<main class="main-content">
				<!-- 聊天界面 -->
				<div class="chat-content" style="display: none;">
					<div class="chat-container">
						<!-- 左侧用户信息 -->
						<div class="chat-left">
							<div class="student-info">
								<img src="student-avatar.jpg" class="student-avatar" alt="Tom">
								<div class="student-details">
									<div class="name">Tom</div>
									<div class="role">学生</div>
								</div>
								<button class="settings-btn">⚙️</button>
							</div>

							<div class="search-wrapper">
								<input type="text" class="chat-search" placeholder="搜索">
							</div>

							<div class="recent-chats">
								<div class="recent-label">最近聊天</div>
								<div class="chat-list">
									<div class="chat-item">
										<img src="thomas-avatar.jpg" alt="Thomas" class="chat-avatar">
										<div class="chat-preview">
											<div class="chat-name">Thomas Fletcher</div>
											<div class="chat-status">typing...</div>
										</div>
										<div class="chat-time">11:15</div>
									</div>
									<div class="chat-item">
										<img src="wade-avatar.jpg" alt="Wade" class="chat-avatar">
										<div class="chat-preview">
											<div class="chat-name">Wade Warren</div>
											<div class="chat-status">are you going to busine...</div>
										</div>
										<div class="chat-time">11:15</div>
									</div>
									<!-- 更多聊天项... -->
								</div>
							</div>
						</div>

						<!-- 右侧聊天区域 -->
						<div class="chat-right">
							<div class="chat-header">
								<div class="participant-info">
									<span class="count">101</span>
									<span class="label">对话参与者</span>
								</div>
								<div class="chat-actions">
									<button class="action-btn">📎</button>
									<button class="action-btn">🖼️</button>
									<button class="action-btn green">Go</button>
								</div>
							</div>

							<div class="messages">
								<div class="message-item">
									<div class="message-info">
										<span class="sender">Jone Copper</span>
										<span class="time">11:24 am</span>
									</div>
									<div class="message-content teacher">
										最近我在一个课程的站点看到了一些我认为没有这类过滤的声音...
									</div>
								</div>

								<div class="message-item">
									<div class="message-info">
										<span class="sender">Fletcher</span>
										<span class="time">11:24 am</span>
									</div>
									<div class="message-content">
										Ooo, why don't you say something more
									</div>
								</div>
							</div>

							<div class="chat-input-box">
								<input type="text" placeholder="写下你要发送的信息..." class="message-input">
								<div class="input-actions">
									<button class="emoji-btn">😊</button>
									<button class="send-btn">发送</button>
								</div>
							</div>
						</div>
					</div>
				</div>

				<!-- 课程内容区域 -->
				<div class="course-content">
					<!-- 原有的课程内容保持不变 -->
					<div class="header">
						<div class="search-box">
							<input type="text" placeholder="搜索...">
						</div>
						<button class="upload-btn">+ 上传新课程</button>
					</div>

					<!-- 统计数据卡片 -->
					<div class="stats-cards">
						<div class="stat-card">
							<div class="icon">📊</div>
							<div class="stat-title" id="xiaoshouliang">销售量</div>
							<div class="stat-value"></div>

						</div>
						<div class="stat-card">
							<div class="icon">👥</div>
							<div class="stat-title" id="zongrenshu">总收入</div>
							<div class="stat-value"></div>
						</div>
						<div class="stat-card">
							<div class="icon">👁️</div>
							<div class="stat-title" id="fangwenliang">课程访问量</div>
							<div class="stat-value"></div>
						</div>
					</div>

					<!-- 课程列表 -->
					<div class="course-list">
						<div class="list-header">
							<span class="list-title">课程状况</span>
						</div>
						<table class="course-table" id="course-table">
							<thead>
								<tr>
									<th>课程名称</th>
									<th>售价</th>

									<th>销售量</th>
									<th>访问量</th>
									<th>操作</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td>
										<div class="course-info">
											<img src="img/diushi.jpeg" alt="课程图片" class="course-image">
											<span>Computer Vision & Models</span>
										</div>
									</td>
									<td>10</td>

									<td>54</td>
									<td>45424</td>
									<td>
										<span class="status-tag">进行中</span>
									</td>
								</tr>
								<tr>
									<td id="mingcheng">
										<div class="course-info">
											<img src="img/diushi.jpeg" alt="课程图片" class="course-image">
											<span>User Experience Design</span>
										</div>
									</td>
									<td>23</td>

									<td>43</td>
									<td>3554</td>
									<td>
										<span class="status-tag">进行中</span>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
			</main>

			<!-- 右侧信息栏 -->
			<aside class="right-panel">
				<div class="earnings">
					<div class="earnings-label">您的余额</div>
					<div class="earnings-value">1,230.08</div>
					<div class="earnings-label">
						<img src="china-flag.png" alt="China" class="country-flag">
						CHINA
					</div>
				</div>
			</aside>
		</div>

		<!-- jQuery代码 -->
		<script>
			$(document).ready(function() {
				console.log('readyreadyready');
				// 从localStorage中获取之前保存的token
				const token = localStorage.getItem('token');
				$.ajax({
					type: 'POST',
					url: 'http://10.2.1.17:8099/EXOnline/font/courses?method=tquery',
					xhrFields: {
						withCredentials: true
					},
					crossDomain: true,
					headers: {
						'Authorization': 'Bearer ' + localStorage.getItem('token')
					},
					success: function(res) {
						console.log(res);
						// 先清空表格tbody中的已有tr元素
						$('#course-table tbody').empty();
						// 假设res是一个数组，里面每个元素代表一门课程的相关信息对象
						if (Array.isArray(res.data)) {
							var tableBody = $('#course-table tbody');
							// 循环遍历数组，为每门课程生成对应的tr并填充数据
							res.data.forEach(function(course) {
								var tr = $('<tr></tr>');
								// 课程名称列
								var courseInfoDiv = $('<div class="course-info"></div>');
								var img = $('<img src="' + (course.course_cover ||
										'img/default.jpg') +
									'" alt="课程图片" class="course-image">');
								var span = $('<span>' + course.course_name + '</span>');
								courseInfoDiv.append(img).append(span);
								tr.append($('<td></td>').append(courseInfoDiv));
								// 售价列
								tr.append($('<td></td>').text(course.course_price));
								// 销售量列
								tr.append($('<td></td>').text(course.course_status));
								// 访问量列
								tr.append($('<td></td>').text(course.course_views));
								// 操作列（这里暂时留空，你可以根据实际需求添加按钮等操作元素）
								tr.append($('<td>进行中</td>'));
								tableBody.append(tr);
								
							});
							console.log(tableBody);
						}
					},
					error: function(error) {
						console.error(error);
						console.log(error);
					}
				});

				$.ajax({
					type: "POST",
					url: 'http://10.2.1.17:8099/EXOnline/font/teacher?method=info',
					headers: {
						'Authorization': 'Bearer ' + localStorage.getItem('token')
					},

					xhrFields: {
						withCredentials: true
					},
					crossDomain: true,
					success: function(res) {
						console.log(res);
						// 将销售量填入对应卡片中
						$('#xiaoshouliang').next('.stat-value').text(res.totalSales);
						// 将总人数填入对应卡片中
						$('#zongrenshu').next('.stat-value').text(parseInt(res.totalViews));
						// 将课程访问量填入对应卡片中
						$('#fangwenliang').next('.stat-value').text(parseInt(res.totalProfits));

					},
					error: function(error) {
						console.error(error)
						console.log(error)
					}
				});
				$('.upload-btn').click(function(e) {
					location.href = 'addcourse.html';
				})
				// 导航切换
				$('.nav-item').click(function(e) {
					e.preventDefault();

					// 移除所有active类
					$('.nav-item').removeClass('active');
					// 给当前点击项添加active类
					$(this).addClass('active');

					// 获取点击的是哪个选项
					const tab = $(this).data('tab');

					// 根据不同选项显示不同内容
					switch (tab) {
						case 'chat':
							$('.course-content').hide();
							$('.chat-content').show();
							break;
						case 'courses':
							$('.chat-content').hide();
							$('.course-content').show();
							break;
					}
				});

				// 发送消息功能
				$('.send-btn').click(function() {
					sendMessage();
				});

				$('.message-input').keypress(function(e) {
					if (e.which == 13) {
						sendMessage();
					}
				});

				function sendMessage() {
					const message = $('.message-input').val().trim();
					if (message) {
						const messageHtml = `
                        <div class="message-item">
                            <div class="message-info">
                                <span class="sender">你</span>
                                <span class="time">${new Date().toLocaleTimeString()}</span>
                            </div>
                            <div class="message-content teacher">
                                ${message}
                            </div>
                        </div>
                    `;
						$('.messages').append(messageHtml);
						$('.message-input').val('');
						// 滚动到底部
						$('.messages').scrollTop($('.messages')[0].scrollHeight);
					}
				}

				// 退出功能
				$('.logout-item').click(function(e) {
					e.preventDefault();
					if (confirm('确定要退出吗？')) {
						console.log('退出登录');
						window.location.href = 'teacherlogin.html';
					}
				});


			});
		</script>
		<script src="js/thearlogin.js"></script>
	</body>

</html>